<template>
    <div id="" class="xinx">
      <div class="tp">
        <div><img src="../../../static/images/wei.jpg"/></div>
        <ul class="ul">
          <li><span>用户名：</span>{{username}}</li>
          <li><span>用户类型：</span>{{type}}</li>
          <li><span>车辆数量：</span>{{vernumber}}</li>
          <li><span></span></li>
        </ul>
        <!-- mui -->
        <button  @click="gai(0)">修改个人信息</button>
        <button  @click="gai(1)">修改车辆信息</button>

        <!--<mt-button type="danger" @click="xuigai" size="large" plain>修改信息</mt-button>-->

      </div>

      <!-- 信息展示-->
      <div class="xianqin">
        <div><h3>信息展示</h3></div>
        <!--车辆详情-->
        <div>
          <ul class="xq">
            <li>
              <div>编号</div>
              <div v-for="item in xiangqing">{{item.serial_number}}</div>
            </li>
            <li>
              <div>车辆品牌</div>
              <div v-for="item in xiangqing">{{item.manufacturing_company}}</div>
            </li>
            <li>
              <div>购买时间</div>
              <div v-for="item in xiangqing">{{item.purchasing_data}}</div>
            </li>
            <li>
              <div>车牌号</div>
              <div v-for="item in xiangqing">{{item.license_plate_number}}</div>
            </li>
            <li>
              <div>车辆类型</div>
              <div v-for="item in xiangqing">{{item.model_of_car}}</div>
            </li>
            <li>
              <div>总里程</div>
              <div v-for="item in xiangqing">{{item.the_total}}</div>
            </li>
            <li>
              <div>油耗</div>
              <div v-for="item in xiangqing">{{item.fuel_consumption}}</div>
            </li>
            <li>
              <div>基本费用</div>
              <div v-for="item in xiangqing">{{item.basic_maintenance_cost}}</div>
            </li>
            <li>
              <div>养路费</div>
              <div v-for="item in xiangqing">{{item.road_toll}}</div>
            </li>
            <li>
              <div>总费用</div>
              <div v-for="item in xiangqing">{{item.cumulative_total_cost}}</div>
            </li>
            <li>
              <div>核载人数</div>
              <div v-for="item in xiangqing">{{item.busload}}</div>
            </li>
            <li>
              <div>箱数</div>
              <div v-for="item in xiangqing">{{item.carton_numbers}}</div>
            </li>
            <li>
              <div>载重</div>
              <div v-for="item in xiangqing">{{item.load_capacity}}</div>
            </li>

          </ul>
        </div>

        <div class="xiugai">
          <div :class="this.xius=='0'?Classblock:''">
            <h4>修改个人信息</h4>
            <div class="inp">
              <span>用户名：</span><input type="text" :placeholder="place" v-model="gainame" >
            </div>
            <button @click="grxiugai">确认修改</button>
          </div>
          <div :class="this.xius=='1'?Classblock:''">
            <!--可修改 购买时间 车牌号 车辆类型 总里程 油耗 基本费用 养路费 总费用 核载人数 箱数 载重-->
            <h4>修改车辆信息</h4>
            <div class="divinp">
              <div class="inp">
                <span>购买时间：</span><input type="text"  v-model="gotime">
              </div>
              <div class="inp">
                <span>品牌：</span><input type="text"  v-model="gopinp">
              </div>
              <div class="inp">
                <span>车牌号：</span><input type="text" v-model="gotchehao">
              </div>
              <div class="inp">
                <span>车辆类型：</span>
                <select v-model="gottype">
                  <option value="小轿车">小轿车</option>
                  <option value="大客车">大客车</option>
                  <option value="大卡车">大卡车</option>
                  <option itany="itany" value="">请选择车辆类型</option>
                </select>

               <!-- <span>车辆类型：</span><input type="text"  v-model="gottype">-->
              </div>
              <div class="inp">
                <span>总里程：</span><input type="text"  v-model="gotli">
              </div>
              <div class="inp">
                <span>油耗：</span><input type="text"  v-model="gotyouhao">
              </div>
              <div class="inp">
                <span>基本费用：</span><input type="text"  v-model="gofyong">
              </div>
              <div class="inp">
                <span>养路费：</span><input type="text"  v-model="goyanglu">
              </div>
              <div class="inp">
                <span>总费用：</span><input type="text"  v-model="gozongf">
              </div>
              <div class="inp" :class="this.gottype!='大客车'?classType:Classtt">
                <span>核载人数：</span><input type="text"  v-model="gorshu">
              </div>
              <div class="inp" :class="this.gottype!='小轿车'?classType:Classtt">
                <span>箱数：</span><input type="text"  v-model="goxiang">
              </div>
              <div class="inp" :class="this.gottype!='大卡车'?classType:Classtt">
                <span>载重量：</span><input type="text"  v-model="gozhong">
              </div>
            </div>
            <div>
              <button @click="chegai">确认修改</button>
              <button @click="chongxi">重新输入</button>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import { Toast } from 'mint-ui';
    export default {
        name: "userinfo",
      data(){
          return{
            classType:'types',
            Classtt:"type",
            xius:'',
            Classblock:"block",
            //数据渲染
            username:'',
            type:"",
            vernumber:"",
            xiangqing:[/*假数据*//*  {"serial_number":"002","manufacturing_company":"奔驰","license_plate_number":"湘Q.A8A89",
                "purchasing_data":"2016-11-18 13:51","model_of_car":"小轿车","the_total":"110km",
                "fuel_consumption":"0.8L/km","basic_maintenance_cost":"1000","road_toll":"100",
                "cumulative_total_cost":"1100","busload":"","carton_numbers":"2","load_capacity":""},
              {"serial_number":"004","manufacturing_company":"东风","license_plate_number":"湘Q.A8A78","purchasing_data":"2016-08-18 13:54","model_of_car":"大卡车","the_total":"130km","fuel_consumption":"1.8L/km","basic_maintenance_cost":"1500","road_toll":"120","cumulative_total_cost":"1620","busload":"","carton_numbers":"","load_capacity":"16t"},
              {"serial_number":"007","manufacturing_company":"奇瑞","license_plate_number":"湘X.78A86","purchasing_data":"2016-03-17 13:59","model_of_car":"大客车","the_total":"155km","fuel_consumption":"1.4L/km","basic_maintenance_cost":"1200","road_toll":"110","cumulative_total_cost":"1310","busload":"42","carton_numbers":"","load_capacity":""}
         */   ],
            //修改车辆信息
            gotime:"",//改时间
            gotchehao:'',//改车牌号
            gottype:'', //改车辆类型
            gotli:"",//改总里程
            gotyouhao:'',//改油耗
            gofyong:"",//改基本费用
            goyanglu:"",//改养路费
            gozongf:"",//改总费用
            gorshu:"",//改核载人数
            goxiang:"",//改箱数
            gozhong:"",//改载重量
            gopinp:"",//该品牌
            place:"",
            //该个人信息
            gainame:''

          }
      },
     /* computed:function () {
          this.gozongf = this.gofyong + this.goyanglu;
      },*/
      created(){
          this.getchusi();
      },
      methods:{
          //修改显示
        gai:function (s) {
          this.xius = s ;
        },
        //请求初始信息
        getchusi:function () {
          var url = "../../../static/home.json";
          this.$http.get(url).then(function (response) {
            if(response.body.status != 0){
              Toast({  //mint-ui 提示
                message: '数据异常',
                position: 'bottom',
                duration: 5000
              });
            }
            this.username = response.body.username;
            this.type = response.body.user_type;
            this.vernumber = response.body.the_car_number;
            this.xiangqing = response.body.che;

            this.place = "原用户名"+/*this.username;*/response.body.username;
          })
        },
        //发送修改 个人请求
        grxiugai:function () {
         /* var url=""; //展无api接口
          this.$http.post(url,{content:this.gainame},{emulateJSON:true}).then(function (response) {
              Toast({  //mint-ui 提示
                message: '提交成功',
                position: 'bottom',
                duration: 5000
              });
              //重新刷新数据
              this.getchusi();
              //发布后 清空文本框
              this.postnr="";
           })*/
        },
        //修改车辆数据 请求
        chegai:function () {
        /*  var url=""; //展无api接口
          var content = {"serial_number":"002",
            "manufacturing_company":this.gopinp,
            "license_plate_number":this.gotchehao,
            "purchasing_data":this.gotime,
            "model_of_car":this.gottype,
            "the_total":this.gotli,
            "fuel_consumption":this.gotyouhao,
            "basic_maintenance_cost":this.gofyong,
            "road_toll":this.goyanglu,
            "cumulative_total_cost":this.gozongf,
            "busload":this.gorshu,
            "carton_numbers":this.goxiang,
            "load_capacity":this.gozhong};
          this.$http.post(url,{content:content},{emulateJSON:true}).then(function (response) {
            Toast({  //mint-ui 提示
              message: '修改成功',
              position: 'bottom',
              duration: 5000
            });
            //重新刷新数据
            this.getchusi();
            //发布后 清空文本框
            this.gotime = "";
            this.gotchehao = "";
            this.gottype = "";
            this.gotli = "";
            this.gotyouhao = "";
            this.gofyong = "";
            this.goyanglu = "";
            this.gorshu = "";
            this.gozongf = "";
            this.goxiang = "";
            this.gozhong = "";
            this.gopinp = "";
          })
          */
        },
        //清空input
        chongxi:function () {
          this.gotime = "";
          this.gotchehao = "";
          this.gottype = "";
          this.gotli = "";
          this.gotyouhao = "";
          this.gofyong = "";
          this.goyanglu = "";
          this.gorshu = "";
          this.gozongf = "";
          this.goxiang = "";
          this.gozhong = "";
          this.gopinp = "";
        }



      }
    }
</script>

<style scoped>
  .xinx{
    width: 100%;
    height:100%;
    display: flex;
  }
  .xinx>div.tp{
    border-right: 1px solid darkgray;
    flex: 1;
    min-width:200px;}
  .xinx>div.tp>div:first-child{
    margin:20px auto;
    width: 40px;
    border-radius:50%;
    overflow: hidden;
  }
  .xinx>div.tp img{width: 100%}
  .xinx>div.xianqin{flex:3}
  .tp button{
    border:1px solid darkgray;
    border-radius:2px;
    text-align: center;
    margin-bottom: 15px;
  }
  .ul{font-size: 16px;text-align: left}
  .ul li{margin-bottom: 10px;color: black}
  .ul span{
    display:inline-block;
    width:50%;
    color:darkgray;
    text-align: right}

  .xianqin{
    min-width: 624px;
    background-color: #bcffee;
  }
  h3{margin:30px  }
  h4{margin: 20px}
  .xq{
    padding: 10px 4px;
    width: 100%;
    font-size:12px;
    display: flex;
    justify-content: space-between;
  }
  .xq>li{
    padding: 3px 2px;
    text-align: left;
  }
  .xq>li div {
    min-height: 24px;
    line-height: 24px;
  }

  .divinp{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .inp span{display: inline-block;vertical-align: middle;font-size: 16px}
  .inp input,.inp select{
    font-size: 16px;
    padding: 0 5px;
    width: 50%;
    height: 24px;
    display: inline-block;
  }


  .divinp>div.inp{width: 48%;}
  .divinp>div.inp span{
    font-size: 12px;
    text-align: right;
    min-width: 60px;
   }
  .divinp>div.inp>input,.inp select{height: 20px;margin-bottom: 5px}
  .xiugai>div{display: none;}
  .xiugai>div.block{display: block}
  .types{visibility: hidden}
  .type{visibility:visible}
</style>
